<template>
  <view>
    <view class="position-fixed left-0 right-0 top-0" :style="{'z-index': 100}">
			<supplier-navbar :title="detail.store_name" :type="type"></supplier-navbar>
			<supplier-sec-item2 :detail="detail" @collect="collect"></supplier-sec-item2>
    	<view class="flex align-center u-p-x-30 bg-white" style="height: 88rpx;">
    		<u-search class="flex-1" v-model="key" animation @custom="custom" @search="custom" @clear="clear" ></u-search>
				<view class="flex align-center u-m-l-10" @click="$refs.supplierPopup.open()">
					<image src="/static/supplier/sx%20(3).png" style="width: 25rpx; height: 25rpx;" mode=""></image>
					<text class="u-m-l-10 u-font-26">筛选</text>
				</view>
    	</view>
			<view class="">
				<u-tabs :list="list" :is-scroll="false" active-color="var(--mainColor)" :current="current" @change="change"></u-tabs>
			</view>
    </view>
		<mescroll-body ref="mescrollRef" top="210px" topbar :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="flex flex-wrap justify-between u-m-20">
			  <block v-for="(item,index) in merchList" :key="item.id">
					<dy-goods-item-list :item="item" price="good_price" :isGrid="true"></dy-goods-item-list>
			  </block>
			</view>
		</mescroll-body>
    <supplier-popup ref="supplierPopup" :list="cateList" @checkboxGroupChange="checkboxGroupChange" @choice="choice"></supplier-popup>
  </view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import { SupplierCenterApi } from '@/api/serves.js'
	import { GoodsCenterApi } from '@/api/serves.js'
  export default {
		mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
				type: 1,  // 从哪里跳转过来
				detail: {},
				list: [{
					name: '热销'
				}, {
					name: '新品'
				}],
				current: 0,
				index: 0,
        merchList: [],
        key: '',
        formData: {
          id: -1,
          name: "",
					merch_id: ''
        },
        cateList: []
      }
    },
		computed:{
			top() {
			  // #ifdef H5
			  return '44px'
			  // #endif
			  // #ifdef APP-VUE
			  return 0
			  // #endif
			},
		},
    onLoad(options) {
			console.log('options', options);
    	this.formData.merch_id = options.id
    	this.type = options.type
			this._initData()
    },
		methods: {
			_initData() {
				this._merchDetail()
        this._merchcategory_list()
			},
			_merchDetail() {
				SupplierCenterApi.merchDetail({id: this.formData.merch_id}).then(res => {
				  console.log('获取商户详情', res);
				  if (res.code == 1) {
						this.detail = res.data.data
				  }
				})
			},
      _merchcategory_list() {
        SupplierCenterApi.merchcategory_list({merch_id: this.formData.merch_id}).then(res => {
          console.log('获取商户分类', res);
          if (res.code == 1) {
			    res.data.data.forEach(item=>{
					item.checked = false
				})
        		this.cateList = res.data.data
          }
        })
      },
			// 上拉加载
			upCallback(page) {
				let params = {
					...this.formData, 
					types: this.current == 1?2:1,
					page: page.num,
				}
				console.log(params);
        uni.showLoading()
			  SupplierCenterApi.merchgoods_list(params).then(res => {
			    console.log('获取商户商品列表', res);
          uni.hideLoading()
			    if (res.code == 1) {
			  		let result = res.data
			  		if(page.num == 1) this.merchList = []; //如果是第一页需手动制空列表
			  		this.merchList = this.merchList.concat(result.listdata); //追加新数据
			  		this.mescroll.endByPage(result.listdata.length, result.pagedata.total)
			    }
			  })
			},
			custom(key) {
				this.formData.name = key
				this.mescroll.resetUpScroll()
			},
      clear() {
        this.key = ''
        this.formData.name = ''
        this.mescroll.resetUpScroll()
      },
			change(index) {
				this.current = index
				this.mescroll.resetUpScroll()
			},
      choice(Ids) {
        console.log(3333, Ids);
        this.formData.id = Ids.join(',')
        this.mescroll.resetUpScroll()
      },
	  checkboxGroupChange(index){
		this.cateList[index].checked = !this.cateList[index].checked
		console.log(this.cateList,"this.cateList");
	  },
			// 收藏 或取消收藏 商品
			collect() {
				this.$ShowLoading()
				let flg = this.detail.is_focus
				let fun = flg? 'notcollectGoods': 'collectGoods'
				GoodsCenterApi[fun]({ id: this.formData.merch_id, type:2 }).then(res => {
				  console.log('收藏商品', res);
				  if (res.code == 1) {
				    this._merchDetail()
						this.$HideLoading()
						flg? this.$u.toast('取消关注成功') : this.$u.toast('关注成功')
				  }else {
						this.$Toast(res.msg, 1500)
					}
				})
			},
    }
  }
</script>

<style lang="scss" scoped>

</style>
